<template>
  <el-dialog v-model="dialogVisiblenow" title="设置列表展示" width="30%">
    <el-table :data="tows" style="width: 100%" height="50vh">
      <!-- <el-table-column prop="prop" label="prop" width="180" /> -->
      <el-table-column prop="label" label="label" width="180" />
      <el-table-column label="是否展示">
        <template #default="scope">
          <el-switch v-model="scope.row.show" />
        </template>
      </el-table-column>
      <el-table-column prop="address" label="排序">
        <template #default="scope">
          <el-button
            type="text"
            style="padding: 0"
            :disabled="scope.$index == 0"
            @click="moveUpward(scope.row, scope.$index)"
            >上移</el-button
          >
          <el-button type="text" style="padding: 0" @click="moveDown(scope.row, scope.$index)">下移</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- <template #footer>
      <span class="dialog-footer">
        <el-button type="primary">确定</el-button>
        <el-button>关闭</el-button>
      </span>
    </template> -->
  </el-dialog>
</template>

<script lang="ts" setup>
import {cloneDeep} from "lodash"
import {ref, defineProps, defineEmits, watch, toRefs, computed, inject, reactive} from "vue"
let props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false,
  },
})
interface propList {
  // { prop: 'medicalServiceFees', label: '医疗服务费', minWidth: '80', show: true },
  prop: String
  label: String
  minWidth: String
  show: Boolean
}
let tableConfig: any = inject("tableConfig")
let setTable = inject("setTable") as Function
//新版增加tab切换表格，因此改为监听provide值
// let tcl =cloneDeep(tableConfig.value.propList)
// let tows = reactive(tableConfig.value.propList)
let tows = computed(() => {
  return tableConfig.value.propList
})
watch(
  tableConfig.value.propList,
  () => {
    setTable(tows.value)
  },
  {deep: true},
)
function moveUpward(row, index) {
  let updata = tows.value[index - 1]
  tows.value.splice(index - 1, 1)
  tows.value.splice(index, 0, updata)
  setTable(tows.value)
}
function moveDown(row, index) {
  let updata = tows.value[index + 1]
  tows.value.splice(index + 1, 1)
  tows.value.splice(index, 0, updata)
  setTable(tows.value)
}
let usedefineEmits = defineEmits(["update:dialogVisible"])
let dialogVisiblenow = computed({
  get() {
    return props.dialogVisible
  },
  set(val) {
    usedefineEmits("update:dialogVisible", val)
  },
})
</script>
<style lang="scss" scoped></style>
